//引入折现图所需的组件
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
//引入未来一周图表库
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components';

//函数封装，实现基础折线图效果
var myChart1//基础折线图的图表实例，声明为全局变量
export function initBaseLineEcharts(chartDom,xAxisData,seriesData){
  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
  // var chartDom = document.getElementById('main');
//   var myChart = echarts.init(chartDom.value);
//判断图表实例是否为空，不为空进行销毁
if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
  myChart1.dispose();
}
  myChart1 = echarts.init(chartDom);//chartDom代表图表的容器元素
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: seriesData,
        type: 'line'
      }
    ]
  };

  option && myChart1.setOption(option);

}

//实现未来一周天气图
var myChart2//未来一周基础折线图的图表实例，声明为全局变量
export function initTempWeekEcharts(chartDom,xAxisData,highestSeriesData,lowestSeriesData) {
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom.value);
//判断图表实例是否为空，不为空进行销毁
if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
  myChart2.dispose();
}
myChart2 = echarts.init(chartDom);//chartDom代表图表的容器元素
var option;

option = {
  title: {
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data:xAxisData,
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: highestSeriesData,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: lowestSeriesData,
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
          { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};

option && myChart2.setOption(option);

  }